<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>进度提示信息</title>
    <script type="text/javascript" src="../../jquery.js"></script>
    <script type="text/javascript" src="../../ui/om-core.js"></script>
    <script type="text/javascript" src="../../ui/om-progressbar.js"></script>
    <link rel="stylesheet" type="text/css" href="../../themes/default/om-all.css" />
    <link rel="stylesheet" type="text/css" href="../common/css/demo.css" />
    <!-- view_source_begin -->
    <script type="text/javascript">
        $(document).ready(function() {
            $('#pbar').omProgressbar({
            	text: function(value){
            		if(value < 30){
            			return "初始化";
            		}else if(value >30&& value < 100){
            			return  "已完成" + value + "%";
            		}else{
            			return "任务完成";
            		}
            	}
            });
            
            $("#test").click(function(){
            	var v = $("#pbar").omProgressbar("value");
            	if(v < 100){
            	   v = Math.floor(Math.random()*10) + v;
            	   $("#pbar").omProgressbar("value", v);
            	   setTimeout(arguments.callee, 200);
            	}
            });
        });
        
    </script>
    <!-- view_source_end -->
</head>
<body>
    <!-- view_source_begin -->
    <div style="margin-top:20px">
        <input type="button" id="test" value="开始"/>
        <br/>
        <div id="pbar" style="width:300px">
        </div>
    </div>
    
    <!-- view_source_end -->
    <div id="view-desc">
         text属性可以定义在进度条中显示的提示信息，默认格式为“进度值%”。示例中使用方法来定义，返回值为显示的提示信息。
        </div>
    <script type="text/javascript" src="../common/js/themeloader.js"></script>
</body>
</html>